<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>添加客服消息</title>
    <style>
        .el-upload__input {
            display: none !important;
        }
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-tabs v-model="msg_type">
                <el-tab-pane label="文本消息" name="text">
                    <el-form ref="text_msg" :model="text_msg" :rules="rules" label-width="120px">
                        <el-form-item label="消息备注" prop="remark">
                            <el-input v-model="text_msg.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="文本内容" prop="content">
                            <el-input type="textarea" :rows="5" v-model="text_msg.content"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit('text_msg')">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="图文消息" name="news">
                    <el-form ref="news_msg" :model="news_msg" :rules="rules" label-width="120px">
                        <el-form-item label="消息备注" prop="remark">
                            <el-input v-model="news_msg.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="图文消息标题" prop="title">
                            <el-input v-model="news_msg.title"></el-input>
                        </el-form-item>
                        <el-form-item label="图文消息描述" prop="desc">
                            <el-input v-model="news_msg.desc" placeholder="默认不填"></el-input>
                        </el-form-item>
                        <el-form-item label="图片链接" prop="image">
                            <el-input v-model="news_msg.image"></el-input>
                        </el-form-item>
                        <el-form-item label="跳转链接" prop="url">
                            <el-input v-model="news_msg.url"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit('news_msg')">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="小程序卡片" name="mini">
                    <el-form ref="mini_msg" :model="mini_msg" :rules="rules" label-width="120px">
                        <el-form-item label="消息备注" prop="remark">
                            <el-input v-model="mini_msg.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="mini_msg.title"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序的appid" prop="xcx_appid">
                            <el-input v-model="mini_msg.xcx_appid"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序页面路径" prop="xcx_pagepath">
                            <el-input v-model="mini_msg.xcx_pagepath" placeholder="不填默认首页"></el-input>
                        </el-form-item>
                        <el-form-item label="小程序卡片图片" prop="xcx_image_url">
                            <el-upload class="avatar-uploader" action='{:url("customer/upload_img")}'
                                       :show-file-list="false" :on-success="upload_img_success"
                                       list-type="picture">
                                <img v-if="mini_msg.xcx_image_url" :src="mini_msg.xcx_image_url" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                <div slot="tip" class="el-upload__tip">小程序封面图片(建议大小为520*416)</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submit('mini_msg')">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msgid: '{$msgid}',
            // tab
            msg_type: 'news',
            // 验证规则
            rules: {
                remark: {required: true, message: "请填写消息备注", trigger: "change"},
                content: {required: true, message: "请填写文本内容", trigger: "change"},
                title: {required: true, message: "请填写图文标题", trigger: "change"},
                image: {required: true, message: "请填写图片链接", trigger: "change"},
                url: {required: true, message: "请填写跳转链接", trigger: "change"},
                xcx_appid: {required: true, message: "请填写小程序appid", trigger: "change"},
                xcx_image_url: {required: true, message: "请填写小程序卡片图片", trigger: "change"},
            },
            // 文本消息
            text_msg: {
                remark: '',
                content: '',
                type: 'text',
            },
            // 图文消息
            news_msg: {
                remark: '',
                title: '',
                desc: '',
                image: '',
                url: '',
                type: 'news',
            },
            // 小程序卡片
            mini_msg: {
                remark: '',
                title: '',
                xcx_appid: '',
                xcx_pagepath: '',
                xcx_image_url: '',
                type: 'mini',
            },
        },
        methods: {
            // 上传图片成功回调
            upload_img_success(res, file) {
                this.mini_msg.xcx_image_url = res;
            },
            // 获取要编辑的消息
            get_msg() {
                var that = this;
                $.ajax({
                    cache: false,
                    url: '{:url("customer/get_msg")}' + '?msgid=' + that.msgid,
                    type: 'get',
                    success: function (res) {
                        if (res) {
                            that.msg_type = res.type;
                            switch (res.type) {
                                case 'text':
                                    that.text_msg.remark = res.remark;
                                    that.text_msg.content = res.content;
                                    that.text_msg.type = res.type;
                                    break;
                                case 'news':
                                    that.news_msg.remark = res.remark;
                                    that.news_msg.title = res.title;
                                    that.news_msg.desc = res.desc;
                                    that.news_msg.image = res.image;
                                    that.news_msg.url = res.url;
                                    that.news_msg.type = res.type;
                                    break;
                                case 'mini':
                                    that.mini_msg.remark = res.remark;
                                    that.mini_msg.title = res.title;
                                    that.mini_msg.xcx_appid = res.xcx_appid;
                                    that.mini_msg.xcx_pagepath = res.xcx_pagepath;
                                    that.mini_msg.xcx_image_url = res.xcx_image_url;
                                    that.mini_msg.type = res.type;
                                    break;
                            }
                        }
                    },
                    error: function () {
                        layerAlert('系统错误,请联系管理员');
                    }
                });
            },
            // 提交
            submit(form_name) {
                var that = this;
                that.$refs[form_name].validate((valid) => {
                    if (valid) {
                        var msg = that[form_name];
                        $.ajax({
                            cache: false,
                            url: '{:url("customer/do_handle_msg")}' + '?msgid=' + that.msgid,
                            data: {msg: msg},
                            type: 'post',
                            success: function (res) {
                                if (res) {
                                    layerAlert('操作成功', function () {
                                        parent.window.location.reload();
                                        layerParentClose();
                                    });
                                } else {
                                    layerAlert('操作失败');
                                }
                            },
                            error: function () {
                                layerAlert('系统错误,请联系管理员');
                            }
                        });
                    }
                });
            },
        },
    });
    vm.get_msg();
</script>
</html>